<template>
    <div style="height:100%;width:100%;">
        <div class="retrieval">
            <div class="youba-primary-grey retrieval-title">正在通过手机找回登录密码</div>
            <div class="retrieval-group">
                <mu-input class="retrieval-input" label="请输入手机号" label-class="retrieval-input-label" v-model="mobile"
                          type="tel" placeholder="手机号"></mu-input>
            </div>
            <div class="retrieval-btn">
                <x-button @click.native="next">下一步</x-button>
            </div>
        </div>
        <confirm v-model="show" class="confirm-box re-confirm" confirmText="好" @on-confirm="confirm">
            <h4 class="confirm-title">确认手机号码</h4>
            <div class="confirm-content">
                <p>我们将发送验证码短信到这个手机号：</p>
                <p>+86 {{mobile}}</p>
            </div>
        </confirm>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../store/constants.vue'
    import {
        MInput
    } from 'muka-ui'
    import {
        XButton,
        Confirm
    } from 'vux'
    import Vue from 'vue'

    export default {
        name: 'hello',
        components: {
            'mu-input': MInput,
            Confirm,
            XButton
        },
        data: function () {
            return {
                show: false,
                mobile: '',
                verifySessionId: ''
            }
        },
        created: function () {
            this.mobile = ''
            this.verifySessionId = ''
        },
        computed: mapState([
            VUEX_NAME.findPwdObj,
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.updateFindPwdObj,
            ]),
            next: async function () {
                let re = /^(\+86)?1[34578]\d{9}$/
                if (this.mobile === '') {
                    this.$vux.toast.show({
                        text: '请输入手机号',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                if (!re.test(this.mobile)) {
                    this.$vux.toast.show({
                        text: '请输入正确的电话号码',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                this.$ajax(
                    'resetPwdOne',
                    {mobile: this.mobile},
                    (content) => {
                        let obj = {}
                        obj.mobile = this.mobile
                        obj.verifySessionId = content.verifySessionId
                        this.updateFindPwdObj(obj)
                        this.show = true
                    }, true)
            },
            confirm: function () {
                this.$router.push('/retrieval2')
            }
        }
    }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .re-confirm .weui-dialog__btn_default {
        display: none;
    }

</style>
